@using Lombiq.Hosting.Tenants.Management.Controllers
@using OrchardCore
@using OrchardCore.Mvc.Core.Utilities
@using static Lombiq.Hosting.Tenants.Management.Constants.FeatureNames

@model Lombiq.Hosting.Tenants.Management.Models.ShellSettingsEditorViewModel

<form asp-action="@nameof(ShellSettingsEditorController.Edit)"
      asp-controller="@typeof(ShellSettingsEditorController).ControllerName()"
      asp-area="@Module"
      method="post"
      class="no-multisubmit">
    <div class="@Orchard.GetWrapperClasses("field-wrapper")" id="FieldWrapper">
        <label asp-for="Json" class="@Orchard.GetLabelClasses()">@T["Shell Settings editor"]</label>
        <div class="@Orchard.GetEndClasses()">
            <span class="hint">
                @T["JSON key-value pairs should be set here, in the same way you'd configure the tenant-specific section in an appsettings.json file."]
            </span>
            <div id="@Html.IdFor(model => model.Json)_editor" asp-for="Settings" style="min-height: 400px;" class="form-control"></div>
            <textarea asp-for="Json" hidden>@Html.Raw(Model.Json)</textarea>
        </div>
    </div>
    <div class="mb-3">
        <input hidden asp-for="TenantId" value="@Model.TenantId"/>
        <button class="btn btn-primary save" type="submit">@T["Save settings"]</button>
    </div>
</form>

<script asp-name="monaco" depends-on="admin" at="Foot"></script>
<script at="Foot" depends-on="monaco">
    $(() => {
        require(['vs/editor/editor.main'], () => {
            const settings = @Json.Serialize(
                new {
                    AutomaticLayout = true,
                    Language = "json",
                });

            const html = document.getElementsByTagName('html')[0];
            const mutationObserver = new MutationObserver(setTheme);
            mutationObserver.observe(html, { attributes: true });

            function setTheme() {
                const theme = html.dataset.theme;
                if (theme === 'darkmode') {
                    monaco.editor.setTheme('vs-dark');
                }
                else {
                    monaco.editor.setTheme('vs');
                }
            }

            setTheme();

            const editor = monaco.editor.create(document.getElementById('@Html.IdFor(model => model.Json)_editor'), settings);
            const textArea = document.getElementById('@Html.IdFor(model => model.Json)');

            editor.setValue(textArea.value);

            window.addEventListener('submit', () => {
                textArea.value = editor.getValue();
            });

            editor.getModel().onDidChangeContent(() => {
                textArea.value = editor.getValue();
                $(document).trigger('contentpreview:render');
            });

            function formatDocument() {
                editor.getAction('editor.action.formatDocument').run();
            }

            editor.onDidChangeModelLanguageConfiguration(formatDocument);
            editor.onDidLayoutChange(formatDocument);
        });
    });

</script>
